import PersonalIcon from '../../../Icon/personalIcon'
import Avator from '../../../common/Avator'
import HeaderWrapper from '../../../common/HeaderWrapper'
import HeaderDetail from '../../../common/HeaderWrapper/headerDetail'
import { getPersonalItem, getPersonalLabel } from '../../../common/utils'
import { useAccentColor } from '../../../common/hooks/useAccentColor'
import { context } from '../../../common/context'

function HeaderItem({ name }) {
  const { resume: { personalDetails, customization } } = context

  const { header, applyAccentColor, layout } = customization
  const [color] = useAccentColor('resumeHeader')
  const iconStyle: any = {
    width: '15px',
    heigth: '15px',
    position: 'absolute',
    left: 0,
    top: '50%',
    transform: 'translateY(-50%)'

  }
  if (applyAccentColor?.includes('icons')) {
    iconStyle.color = color
  }
  const style: any = {
    // paddingBottom: '0.8em',
    marginTop: '8px',
    display: 'flex',
    alignItems: 'center',
    gap: '4px',
    whiteSpace: 'nowrap',
    paddingLeft: '20px',
    position: 'relative'
  }
  if (layout.detailsPosition === 'top') {
    style.marginTop = '2px'
  }
  if (header.position === 'top' && (header.detailsArrangement === 'grid-2' || header.detailsArrangement === 'grid-3')) {
    style.flexDirection = 'column'
    style.gap = '0px'
    style.marginTop = '6px'
    iconStyle.position = 'none'
    iconStyle.top = 0
    iconStyle.transform = 'none'
  }

  const content = getPersonalItem(personalDetails, name)

  const Label = () => {
    if (header.detailsArrangement !== 'wrap') {
      return <div style={ { display: 'flex', }}>
        <div>
          {
            getPersonalLabel(personalDetails, name)
          }
        </div>
        {
          content
        }
      </div>
    }
    return <>
      {
        getPersonalLabel(personalDetails, name).replace(/　/g, '')
      }
      {
        content
      }
    </>
  }

  if (content) {
    return <div style={style}>
      <PersonalIcon name={name} style={iconStyle}></PersonalIcon>
      {
        header.showLabel
          ? <Label />
          : <div>
            {
              content
            }
          </div>
      }
    </div>
  }
  else {
    return null
  }
}
function ResumeHeader() {
  const { resume: { personalDetails, customization }, fontScale } = context

  const { layout, spacing, applyAccentColor, header } = customization
  const { position, photoObj } = header
  const detailsOrder = (personalDetails?.detailsOrder || []).filter(item => item !== 'name' && item !== 'expJob')
  const nameStyle: any = {
    fontSize: `${(spacing.fontSize + 20) * fontScale}pt`, fontWeight: 'bold', lineHeight: `${spacing.lineHeight + 20}pt`,
  }
  const [color] = useAccentColor('resumeHeader')
  if (layout.detailsPosition !== 'top' || position === 'top') {
    nameStyle.marginTop = '20px'
    nameStyle.textAlign = 'center'
  }

  if (applyAccentColor?.includes('name')) {
    nameStyle.color = color
  }
  const jobStyle: any = {
    fontSize: `${(spacing.fontSize + 12) * fontScale}pt`,
    fontWeight: '500',
    lineHeight: `${(spacing.lineHeight + 15)}pt`,
    // marginBottom: '15px',
    // marginTop: '15px'
  }
  if (applyAccentColor?.includes('expJob')) {
    jobStyle.color = color
  }
  if (layout.detailsPosition !== 'top') {
    // jobStyle.marginTop = '10px'
  }
  const nameWraperStyle: any = {
    display: 'flex',
    marginBottom: '10px',
    gap: "10px",
    alignItems: 'flex-end'
  }
  if (position === 'top') {
    nameWraperStyle.justifyContent = 'center'
  }
  return <HeaderWrapper >
    <Avator {...personalDetails.photoObj}{...photoObj}></Avator>
    <div style={{ flex: 1 }}>
      <div style={nameWraperStyle}>
        <div style={nameStyle} id='name'>
          { getPersonalItem(personalDetails, 'name')}
        </div>
        <div style={jobStyle}>
          {
            getPersonalLabel(personalDetails, 'expJob')
          }
          { getPersonalItem(personalDetails, 'expJob')}
        </div>
      </div>

      <HeaderDetail>
        {
          detailsOrder.map((item) => {
            return <HeaderItem name={item} key={item} ></HeaderItem>
          })
        }
      </HeaderDetail>
    </div>

  </HeaderWrapper>
}
export default ResumeHeader
